<template>
  <table class="tabletip">
    <thead>
      <tr>
        <th :colspan="dataManagerColumns.length" style="font-size:120%">
          Data Manager: {{ dataManagerTableName }}
          <a class="icon-btn" href="javascript:void(0)"
            @click="handleReloadButtonClick"
            :title="`Reload ${dataManagerTableName} tool data table`"
          ><span class="fa fa-refresh"></span></a>
        </th>
      </tr>
      <tr>
        <th v-for="column in dataManagerColumns">{{ column }}</th>
      </tr>
    </thead>
    <tbody v-for="item in dataManagerItems">
      <tr>
        <td v-for="column in dataManagerColumns">{{ item[column] }}</td>
      </tr>
    </tbody>
  </table>
</template>

<script>
export default {
    props: {
        dataManagerTableName: {
            type: String,
            required: true
        },
        dataManagerColumns: {
            type: Array,
            required: true
        },
        dataManagerItems: {
            type: Array,
            required: true
        }
    },
    methods: {
        handleReloadButtonClick(event) {
            this.$emit("reloaddatamanager", this.dataManagerTableName);
        }
    }
};
</script>
